@charset 'uft-8';
@import './_reset.scss';
@import './px2rem.scss';

body {
    // position: relative;
    height: 100%;
}

// 最外层
.wrapper {
    width: 100%;
    height: 100%;
    background-image: url('../image/background.jpg');
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;

    .logo {
        width: p(221);
        height: p(194);
        margin-top: p(105);
        background-image: url('../image/logo.png');
        background-size: cover;
    }

    .input-item {
        margin-top: p(140);

        .username,
        .phone,
        .id-card {
            width: p(576);
            height: p(76);
            display: flex;
            align-items: center;
            box-sizing: border-box;
            flex-wrap: wrap;
            background-color: rgba($color: #c8e9fa, $alpha: .3);
            // opacity: 0.7;
            border-radius: p(38);
            margin-bottom: p(50);
            position: relative;

            label {
                position: absolute;
                margin-left: p(30);
                font-size: p(26);
            }

            input {
                width: 100%;
                height: 100%;
                background: transparent;
                border: none;
                outline: none;
                text-indent: p(100);
                font-size: p(26);
                color: #000;
                &:-internal-autofill-previewed,
                &:-internal-autofill-selected{
                    transition: background-color 5000s ease-in-out 0s !important;
                }
            }
            .mes {
                display: block;
                right: p(3);
                font-size: p(30);
                margin-top: p(10);
                background-color: rgba($color: #aa96da, $alpha: .7);

            }

        }

        .id-card {
            margin: 0;

            input {
                text-indent: p(175);
            }
        }
    }

    .click-btn {
        width: p(576);
        margin-top: p(75);
        display: flex;
        justify-content: space-between;

        button {
            border-radius: p(38);
            font-size: p(28);
            width: p(245);
            height: p(76);
            background-color: #ffffffcc;
            box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.39);
            border: none;
            outline: none;
            color: #0075c1;
        }

    }

}

.tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 40%;
    background-color: rgba($color: #c8e9fa, $alpha: 1);
    color: #333;
    border-radius: p(30);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    display: none;

    .tip-close {
        position: absolute;
        width: p(60);
        height: p(60);
        right: p(20);
        top: p(20);
        text-align: center;
        border-radius: 50%;
        border: 1px solid #000;
    }
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: #000, $alpha: .7);
    z-index: 1;
    display: none;
}

.showtip {
    display: flex !important;
}